<template>
    <div class="detail_module_panel personal_info">
        <h3 id="personal_info" class="detail_panel_title detail_panel_title_icon personal_info_icon">{{ $t('tel.voiceProcess') }}</h3>
        <!--电核中-->
        <div class="panel_info_content" v-if="this.checkStatus == 0">
            <ul style="padding-left: 32px;padding-right: 32px;">
                <el-form :model="userForm">
                    <li>一、 您好，请问是{{ userData.realName }}吗（全名）？</li>

                    <li style="padding-top: 10px;">
                        <p>二、 我是{{ addProduct === 'ltqb' ? '老铁钱包' : '锦鲤钱包'
                            }}审核中心的工作人员，看到您在我司平台上申请了借款，有些问题需要在给您放款前确认一下， 请提供一下您的注册手机号码（全号）。</p>
                        <span class="para_top">【答案：{{ userData.phone }}】</span>
                        <el-form-item style="display: inline-block; width: 150px;">
                            <el-select v-model="userForm.phoneAnswer" placeholder="请选择" size="small" @change="getValue1"
                                       clearable>
                                <el-option :key="1" label="正确" :value="1"></el-option>
                                <el-option :key="2" label="错误" :value="2"></el-option>
                                <el-option :key="3" label="有提示" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </li>
                    <li style="padding-top: 10px;">
                        <p>三、 请问您注册使用的身份证号码是多少？（全号）</p>
                        <span class="para_top">【答案：{{ userData.cardId }}】</span>
                        <el-form-item style="display: inline-block; width: 150px;">
                            <el-select v-model="userForm.cardIdAnswer" placeholder="请选择" size="small"
                                       @change="getValue2" clearable>
                                <el-option :key="1" label="正确" :value="1"></el-option>
                                <el-option :key="2" label="错误" :value="2"></el-option>
                                <el-option :key="3" label="有提示" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </li>
                    <li style="padding-top: 10px;">
                        <p>四、 反欺诈问题</p>

                        <p class="ques11">1、请问您放款的银行卡是哪家银行？（不可引导提醒）</p>
                        <span class="para_top">【答案： {{ userData.bankName }}】</span>
                        <el-form-item style="display: inline-block; width: 150px;">
                            <el-select v-model="userForm.bankAnswer" placeholder="请选择" size="small"
                                       @change="getValue(userForm.bankAnswer,'userForm.bankAnswer')" clearable>
                                <el-option :key="1" label="正确" :value="1"></el-option>
                                <el-option :key="2" label="错误" :value="2"></el-option>
                                <el-option :key="3" label="有提示" :value="3"></el-option>
                            </el-select>
                        </el-form-item>

                        <p class="ques11">2、请问您现在的居住地址是哪里？（不可引导提醒）</p>
                        <span class="para_top">【答案： {{ address }}】</span>
                        <el-form-item style="display: inline-block; width: 150px;">
                            <el-select v-model="userForm.addressAnswer" placeholder="请选择" size="small"
                                       @change="getValue(userForm.addressAnswer,'userForm.addressAnswer')" clearable>
                                <el-option :key="1" label="正确" :value="1"></el-option>
                                <el-option :key="2" label="错误" :value="2"></el-option>
                                <el-option :key="3" label="有提示" :value="3"></el-option>
                            </el-select>
                        </el-form-item>

                        <p class="ques11">3、请问您的生肖是什么？（须快速回答）</p>
                        <span class="para_top">【答案： {{ userData.shengXiao }}】</span>
                        <el-form-item style="display: inline-block; width: 150px;">
                            <el-select v-model="userForm.contactsAnswer" placeholder="请选择" size="small"
                                       @change="getValue(userForm.contactsAnswer,'userForm.contactsAnswer')" clearable>
                                <el-option :key="1" label="正确" :value="1"></el-option>
                                <el-option :key="2" label="错误" :value="2"></el-option>
                                <el-option :key="3" label="有提示" :value="3"></el-option>
                            </el-select>
                        </el-form-item>

                        <p class="ques11">4、请问您工作的单位名称是什么？</p>
                        <span class="para_top">【答案： {{ userData.companyName }}】</span>
                        <el-form-item style="display: inline-block; width: 150px;">
                            <el-select v-model="userForm.companyNameAnswer" placeholder="请选择" size="small"
                                       @change="getValue(userForm.companyNameAnswer,'userForm.companyNameAnswer')"
                                       clearable>
                                <el-option :key="1" label="正确" :value="1"></el-option>
                                <el-option :key="2" label="错误" :value="2"></el-option>
                                <el-option :key="3" label="有提示" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </li>

                    <p>以上反欺诈问题不区分先后顺序，如果第一个问题正确，直接合适金额周期。如果第一个问题错误，需要追加2个反欺诈问题，后两个问题需要全对， 如果错2个直接拒绝处理。</p>

                    <li style="padding-top: 10px;">
                        五、 （如以上问题审核未通过，可跳过此步骤，转至结束语）
                        <p>您本次申请的借款金额是否为【{{ amount }}元】？您借款金额为【{{ amount }}元】，无法更改您是否认可？</p>
                        <p class="para_top">
                            <el-form-item style="display: inline-block; width: 150px;">
                                <el-select v-model="userForm.amountAnswer" placeholder="请选择" size="small"
                                           @change="getValue7" clearable>
                                    <el-option :key="1" label="正确" :value="1"></el-option>
                                    <el-option :key="2" label="认可" :value="2"></el-option>
                                    <el-option :key="3" label="不认可" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </p>
                        <p>您当时填写借款使用周期是否是【{{ periodDays }}天】？您借款周期为【{{ periodDays }}天】，无法更改您是否认可？</p>
                        <p class="para_top">
                            <el-form-item style="display: inline-block; width: 150px;">
                                <el-select v-model="userForm.periodAnswer" placeholder="请选择" size="small"
                                           @change="getValue8" clearable>
                                    <el-option :key="1" label="正确" :value="1"></el-option>
                                    <el-option :key="2" label="认可" :value="2"></el-option>
                                    <el-option :key="3" label="不认可" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </p>
                    </li>

                    <li>
                        六、 结束语
                        <p>（电核成功）：好的，我们将尽快完成放款，建议您在借款使用周期内及时完成还款，还款至{{ addProduct === 'ltqb' ? '老铁钱包' : '锦鲤钱包'
                            }}的账户，不要出现逾期的情况，感谢您的接听，再见！</p>
                        <p>（电核失败）：好的，感谢您的接听，我们将在确认您的借款无误后，尽快完成放款，烦请您耐心关注APP中的信息（结果）提示，感谢您的接听，再见！
                            （电核中审核失败，如客户询问是否审核通过，不可告知没有通过，把失败结束语再说一遍即可）</p>
                    </li>
                </el-form>
            </ul>
        </div>

        <!--电核结案-->
        <div class="panel_info_content" v-else>
            <ul style="padding-left: 32px;padding-right: 32px;">
                <li>一、 您好，请问是{{ userData.realName }}吗（全名）？</li>
                <el-row>
                    <li style="padding-top: 10px;">
                        <el-col :span="24">
                            <p>二、 我是{{ addProduct === 'ltqb' ? '老铁钱包' : '锦鲤钱包'
                                }}审核中心的工作人员，看到您在我司平台上申请了借款，有些问题需要在给您放款前确认一下， 请提供一下您的注册手机号码（全号）。</p>
                            <span class="para_top">【答案：{{ userData.phone }}】</span>
                            <span v-if="this.answer"
                                  :class="color(answer.phoneAnswer)">{{ answer.phoneAnswer | answerStatus }}</span>
                        </el-col>
                    </li>
                </el-row>
                <el-row>
                    <li style="padding-top: 10px;">
                        <el-col :span="24">
                            <p>三、 请问您注册使用的身份证号码是多少？（全号）</p>
                            <span class="para_top">【答案：{{ userData.cardId }}】</span>
                            <span v-if="this.answer"
                                  :class="color(answer.cardIdAnswer)">{{ answer.cardIdAnswer | answerStatus }}</span>
                        </el-col>
                    </li>
                </el-row>
                <el-row>
                    <li style="padding-top: 10px;">
                        <p>四、 反欺诈问题</p>
                        <el-col :span="24">
                            <p class="ques11">1、请问您放款的银行卡是哪家银行？（不可引导提醒）</p>
                            <span class="para_top">【答案：{{ userData.bankName }}】</span>
                            <span v-if="this.answer"
                                  :class="color(answer.bankAnswer)">{{ answer.bankAnswer | answerStatus }}</span>
                        </el-col>
                        <el-col :span="24">
                            <p class="ques11">2、请问您现在的居住地址是哪里？（不可引导提醒）</p>
                            <span class="para_top">【答案：{{address}}】</span>
                            <span v-if="this.answer"
                                  :class="color(answer.addressAnswer)">{{ answer.addressAnswer | answerStatus }}</span>
                        </el-col>
                        <el-col :span="24">
                            <p class="ques11">3、请问您的生肖是什么？（须快速回答）</p>
                            <span class="para_top">【答案：{{ userData.shengXiao }}】</span>
                            <span v-if="this.answer"
                                  :class="color(answer.contactsAnswer)">{{ answer.contactsAnswer | answerStatus
                                }}</span>
                        </el-col>
                        <el-col :span="24">
                            <p class="ques11">4、请问您工作的单位名称是什么？</p>
                            <span class="para_top">【答案：{{ userData.companyName }}】
                <span v-if="this.answer"
                      :class="color(answer.companyNameAnswer)">{{ answer.companyNameAnswer | answerStatus
                    }}</span></span>
                        </el-col>
                    </li>
                </el-row>
                <el-row>
                    <li style="margin-top: 10px;">
                        五、 （如以上问题审核未通过，可跳过此步骤，转至结束语）
                        <el-col :span="24">
                            <p>您本次申请的借款金额是否为【{{ amount }}元】？您借款金额为【{{ amount }}元】，无法更改您是否认可？</p>
                            <span class="para_top">【答案：{{ amount }}元】
                <span v-if="this.answer" :class="color1(answer.amountAnswer)">{{ answer.amountAnswer | answerStatus1
                    }}</span>
                </span>

                            <p style="margin-top: 10px;">您当时填写借款使用周期是否是【{{ periodDays }}天】？您借款周期为【{{ periodDays
                                }}天】，无法更改您是否认可？</p>
                            <span class="para_top">【答案：{{ periodDays }}天】
                <span v-if="this.answer" :class="color1(answer.periodAnswer)">{{ answer.periodAnswer | answerStatus1
                    }}</span>
                </span>
                        </el-col>
                    </li>
                </el-row>
                <el-row>
                    <li style="padding-top: 10px;">
                        六、 结束语
                        <p>（电核成功）：好的，我们将尽快完成放款，建议您在借款使用周期内及时完成还款，还款至{{ addProduct === 'ltqb' ? '老铁钱包' : '锦鲤钱包'
                            }}的账户，不要出现逾期的情况，感谢您的接听，再见！</p>
                        <p>（电核失败）：好的，感谢您的接听，我们将在确认您的借款无误后，尽快完成放款，烦请您耐心关注APP中的信息（结果）提示，感谢您的接听，再见！
                            （电核中审核失败，如客户询问是否审核通过，不可告知没有通过，把失败结束语再说一遍即可）</p>
                    </li>
                </el-row>
            </ul>
        </div>
    </div>
</template>

<script>
    import EventBus from '@/libs/event-bus';
    import {eventConf} from '@/config/';

    let that = null;
    export default {
        name: 'userOrderInfo',
        props: {
            userData: {
                type: Object
            }
        },
        data() {
            return {
                // callSrc: '',
                answerRank: [],
                userForm: {
                    phoneAnswer: '',
                    cardIdAnswer: '',
                    bankAnswer: '',
                    addressAnswer: '',
                    contactsAnswer: '',
                    companyNameAnswer: '',
                    periodAnswer: '',
                    amountAnswer: '',
                },
                answer: {
                    phoneAnswer: '',
                    cardIdAnswer: '',
                    bankAnswer: '',
                    addressAnswer: '',
                    contactsAnswer: '',
                    companyNameAnswer: '',
                    periodAnswer: '',
                    amountAnswer: '',
                },
                checkStatus: '',
                periodDays: '',
                amount: '',
                valueArr: [],
                user: this.$storage.get('user'),
                addProduct: '',
            };
        },
        computed: {
            address() {
                let address = '';
                const baseInfo = this.userData;
                if (baseInfo.address) {
                    address = baseInfo.province + ' ' + baseInfo.city + ' ' + baseInfo.district + ' ' + baseInfo.address;
                }
                return address;
            },
        },
        methods: {
            // 调呼叫系统
            // call(tel) {
            //       // if (phone && /^\d+$/.test(phone)) {
            //       //     this.callSrc = `./static/dial.html?phone=${phone}&method=dial&timestamp=${Date.now()}`;
            //       // }
            //       if (tel) {
            //           const params = {
            //               phone: tel,
            //               userId: this.user.id,
            //           };
            //           this.$api.callCenter.customerServiceCallOut(params).then(res => {
            //               // console.log('++++++++++++++++++++');
            //               // console.log(params);
            //               const { status, data, error } = res;
            //               if ('1' === status && '00000000' === error) {
            //               //
            //               }
            //           });
            //       }
            //   },
            getOrderInfo() {
                const params = {
                    orderNid: this.orderId,
                };
                this.$api.tel.getOrderInfo(params).then((res) => {
                    const {status, data} = res;
                    if (status === '1' && data[0]) {
                        this.amount = data[0].amount;
                        this.periodDays = data[0].periodDays;
                        this.checkStatus = data[0].checkStatus;
                        this.queryTelAnswer();
                    }
                });
            },
            listenEvent() {
                EventBus.$on(eventConf.UPDATATELRECORD, () => {
                    this.getOrderInfo();
                    this.userForm.phoneAnswer = '';
                    this.userForm.cardIdAnswer = '';
                    this.userForm.bankAnswer = '';
                    this.userForm.addressAnswer = '';
                    this.userForm.contactsAnswer = '';
                    this.userForm.companyNameAnswer = '';
                    this.userForm.periodAnswer = '';
                    this.userForm.amountAnswer = '';
                });
            },
            queryTelAnswer() {
                const params = {
                    orderNid: this.orderId,
                };
                this.$api.tel.queryTelAnswer(params).then((res) => {
                    const {status, data} = res;
                    if (status === '1') {
                        this.answer = data;
                    }
                });
            },
            getValue1(val) {
                EventBus.$emit('myParams1', val);
            },
            getValue2(val) {
                EventBus.$emit('myParams2', val);
            },
            getValue(val, model) {
                if (this.valueArr.indexOf(model) === -1) {
                    this.valueArr.push(model);
                }
                EventBus.$emit('myParams3', this.userForm.bankAnswer);
                EventBus.$emit('myParams4', this.userForm.addressAnswer);
                EventBus.$emit('myParams5', this.userForm.contactsAnswer);

                EventBus.$emit('myParams6', this.userForm.companyNameAnswer);
                EventBus.$emit('myParams9', this.valueArr);
            },
            getValue7(val) {
                EventBus.$emit('myParams7', val);
            },
            getValue8(val) {
                EventBus.$emit('myParams8', val);
            },
            color1(e) {
                if (e === '1') {
                    return 'green';
                } else if (e === '2') {
                    return 'green';
                } else if (e === '3') {
                    return 'red';
                } else {
                    return 'black'
                }
            },
            color(e) {
                if (e === '1') {
                    return 'green';
                } else if (e === '2') {
                    return 'red';
                } else if (e === '3') {
                    return 'purple';
                } else {
                    return 'black'
                }
            },
        },
        created() {
            that = this;
            const params = this.$route.params;
            this.orderId = params.orderNid;
            this.checkStatus = params.checkStatus;
            this.addProduct = params.addProduct;
            if (this.checkStatus !== 0) {
                this.queryTelAnswer();
            }
            this.listenEvent();
            this.getOrderInfo();
        },
        filters: {
//        身份认证状态
            answerStatus(answer) {
                switch (answer) {
                    case '1':
                        return '正确';
                    case '2':
                        return '错误';
                    case '3':
                        return '有提示';
                    default :
                        return '--';
                }
            },
            answerStatus1(answer) {
                switch (answer) {
                    case '1':
                        return '正确'; // 正确
                    case '2':
                        return '认可'; // 认可
                    case '3':
                        return '不认可'; // 不认可
                    default :
                        return '--';
                }
            },
        }
    };
</script>

<style lang="scss" scoped>
    .rank-answer {
        display: inline-block;
        width: 55px;
        margin-left: 10px;
        color: #000;
        background-color: #CC6633;
        text-align: center;
    }

    .blue {
        margin-left: 10px;
        color: #1983fa;
        font-weight: bold;
    }

    .ques11 {
        padding-left: 10px;
        padding-top: 10px;
    }

    .red {
        color: red;
    }

    .green {
        color: green;
    }

    .purple {
        color: purple;
    }

    .black {
        color: #000;
    }
</style>
